<template>
  <div class="both-box">
    <div class="both-left">
      <div class="left-img">
        <img :src="leftImg" alt="" />
      </div>
    </div>
    <div class="both-right">
      <login-detail />
    </div>
  </div>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue';
  import LoginDetail from '@/views/login/login-detail/index.vue';
  import { useGlobalStore } from '@common/store/global-store';
  import { useMicroStore } from '@common/store/micro-store';
  import { getLoginImg, getOriginalPicture } from '@/helper/publish';
  import { EVENT_METHOD } from '@/helper/constant';
  import { decode } from '@jecloud/utils';
  import VueEvent from '@/helper/event';
  export default defineComponent({
    name: 'LoginBoth',
    components: {
      LoginDetail,
    },
    setup() {
      const globalStore = useGlobalStore();
      const microStore = useMicroStore();
      // let leftImg = ref(getLoginImg('leftImg')); //方案二图片
      let leftImg = ref('');
      const methods = {
        initLeftImg() {
          const loginConfig = globalStore.plans.get(globalStore.activePlan) || {};
          const leftImgObj = decode(loginConfig.JE_SYS_LEFTIMG);
          if (leftImgObj) {
            if (Array.isArray(leftImgObj)) {
              leftImg.value = getOriginalPicture(globalStore.activePlan, leftImgObj[0].fileKey);
            } else {
              leftImg.value = getOriginalPicture(globalStore.activePlan, leftImgObj.fileKey);
            }
          }
        },
        loadLeftImg(data) {
          const leftImgObj = decode(data.JE_SYS_LEFTIMG);
          if (leftImgObj) {
            if (Array.isArray(leftImgObj)) {
              leftImg.value = getOriginalPicture(globalStore.activePlan, leftImgObj[0].fileKey);
            } else {
              leftImg.value = getOriginalPicture(globalStore.activePlan, leftImgObj.fileKey);
            }
          }
        },
      };
      // 注册主应用监听事件
      microStore.on('admin-plan-change', (config) => {
        // leftImg.value = getLoginImg('leftImg');
        methods.initLeftImg();
      });
      onMounted(() => {
        methods.initLeftImg();
        VueEvent.on(EVENT_METHOD.LOGIN_METHOD, methods.loadLeftImg);
      });
      return {
        leftImg,
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .both-box {
    width: 900px;
    height: 540px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    z-index: 5;
    .both-left {
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      border-right: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      justify-content: center;
      .left-img {
        width: 100%;
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        img {
          width: auto;
          height: auto;
          max-height: 100%;
          max-width: 100%;
        }
      }
    }
    .both-right {
      width: 50%;
      height: 100%;
    }
  }
</style>
